<template>
    <div>
        <!-- 面包屑导航区 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>用户管理</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 卡片视图区 -->
        <el-card >
            <!-- 搜索与添加区域 -->               
            <el-row :gutter="20">
                <el-col :span="8">
                    <el-input placeholder="请输入内容" 
                    v-model="queryInfo.query" clearable @clear="getUserList">                   
                        <el-button slot="append" icon="el-icon-search" 
                        @click="getUserList"></el-button>
                    </el-input>
                </el-col>
            </el-row>
            

            <!-- 用户列表区 -->
            <el-table :data="userlist" border stripe>
                <el-table-column label="姓名" prop="name"></el-table-column>
                <el-table-column label="性别" prop="sex"></el-table-column>
                <el-table-column label="班级" prop="classes"></el-table-column>
                <el-table-column label="学院" prop="school"></el-table-column>
                <el-table-column label="专业" prop="professional"></el-table-column>
                <el-table-column label="意向事业群" prop="group"></el-table-column>
                <el-table-column label="意向职位" prop="intjob"></el-table-column>
                <el-table-column label="操作" width="180px">
                    <template slot-scope="scope">
                        <!-- 修改按钮 -->
                        <el-button type="primary" 
                        icon="el-icon-edit" size="mini" 
                        @click="showEditDialog(scope.row.id)"></el-button>
                        <!-- 删除按钮 -->
                        <el-button type="danger" 
                        icon="el-icon-delete" size="mini"
                        @click="removeUserById(scope.row.id)"></el-button>
                        <!-- 分配角色按钮 -->
                        <el-tooltip effect="dark" content="分配角色" placement="top" 
                        :enterable="false"	>
                            <el-button type="warning" 
                            icon="el-icon-setting" 
                            size="mini" @click="setRole(scope.row)"></el-button>
                        </el-tooltip>
                        
                    </template>
                </el-table-column>
            </el-table>
            
            <!-- 分页区域 -->
             <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="queryInfo.pagenum"
                :page-sizes="[1, 2, 5, 10]"
                :page-size="queryInfo.pagesize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>


            <!-- 修改用户对话框 -->
            <el-dialog
                title="修改用户"
                :visible.sync="editDialogVisible"
                width="50%" @close="editDialogClosed"
               >
                <el-form :model="editForm" :rules="editFormRules" ref="editFormRef" 
                label-width="70px" >
                   
                    <el-form-item label="姓名">
                      <el-input v-model="editForm.name" disabled></el-input>
                    </el-form-item>

                    <el-form-item label="面试时间">
                      <el-input v-model="editForm.interview_time"></el-input>
                    </el-form-item>

                    <el-form-item label="性别">
                      <el-input v-model="editForm.sex" disabled></el-input>
                    </el-form-item>

                    <el-form-item label="调剂态度">
                      <el-input v-model="editForm.adjustattitude" disabled></el-input>
                    </el-form-item>

                    <el-form-item label="意向职务方向">
                      <el-input v-model="editForm.intjob" disabled></el-input>
                    </el-form-item>

                     <el-form-item label="专业">
                      <el-input v-model="editForm.professional" disabled></el-input>
                    </el-form-item>

                    <el-form-item label="电话">
                      <el-input v-model="editForm.tel" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="邮箱">
                      <el-input v-model="editForm.email" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="学号">
                      <el-input v-model="editForm.stuid" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="QQ">
                      <el-input v-model="editForm.qq" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="成绩">
                      <el-input v-model="editForm.grade" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="学院">
                      <el-input v-model="editForm.school" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="班级">
                      <el-input v-model="editForm.classes" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="意向事业群">
                      <el-input v-model="editForm.group" ></el-input>
                    </el-form-item>
                    <el-form-item label="个人优势">
                      <el-input v-model="editForm.advantage" disabled></el-input>
                    </el-form-item>

                     <el-form-item label="技术栈">
                      <el-input v-model="editForm.stack" disabled></el-input>
                    </el-form-item>

                     <el-form-item label="个人规划">
                      <el-input v-model="editForm.plain" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="获奖经历">
                      <el-input v-model="editForm.winexperience" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="家乡">
                      <el-input v-model="editForm.home" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="出生日期">
                      <el-input v-model="editForm.born" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="项目经历">
                      <el-input v-model="editForm.projectexperience" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="作品链接">
                      <el-input v-model="editForm.worklink" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="专业排名">
                      <el-input v-model="editForm.professionalrank" disabled></el-input>
                    </el-form-item>
                      <el-form-item label="专业排名">
                      <el-input v-model="editForm.cadre" disabled></el-input>
                    </el-form-item>
                     <el-form-item label="其他信息">
                      <el-input v-model="editForm.otherinfo" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="状态">
                      <el-input v-model="editForm.state" disabled></el-input>
                    </el-form-item>

                    
                </el-form>
                <span slot="footer" class="dialog-footer">
                  <el-button @click="editDialogVisible = false">取 消</el-button>
                  <el-button type="primary" @click="editUserInfo">确 定</el-button>
                </span>
            </el-dialog>


            <!-- 分配角色得对话框 -->
            <el-dialog
              title="分配角色"
              :visible.sync="setRoleDialogVisible"
              width="50%"
            >
              <div>
                  <p>当前的用户：{{userInfo.username}}</p>
                  <p>当前的角色：{{userInfo.role_name}}</p>
                  <p>分配新角色：
                      <el-select v-model="selectedRoleId" placeholder="请选择">
                        <el-option
                          v-for="item in rolesList"
                          :key="item.id"
                          :label="item.roleName"
                          :value="item.id">
                        </el-option>
                    </el-select>
                  </p>
              </div>
              <span slot="footer" class="dialog-footer">
                <el-button @click="setRoleDialogVisible = false">取 消</el-button>
                <el-button type="primary"
                 @click="saveRoleInfo">确 定</el-button>
              </span>
            </el-dialog>
        </el-card>
        
    </div>
</template>

<script>
export default {
    data(){
        //验证邮箱的规则
        var checkEmail = (rule, value, cb)=>{
            //验证邮箱的正则表达式
        const regEmail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/
        if(regEmail.test(value)){
            //合法的邮箱
            return cb()
        }

        cb(new Error('请输入合法的邮箱'))
        }

        //验证手机号的规则
        var checkMobile = (rule, value, cb)=>{
            //定义手机号的正则表达式
        const regMobile = /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/
        if(regMobile.test(value)){
            return cb()
        }
        cb(new Error('请输入合法的手机号'))
        }
        return{
            //获取用户列表的参数对象
            queryInfo:{
                query:'',
                //当前页数
                pagenum:1,
                //当前每页数据条数
                pagesize:10
            },
            userlist:[

                {
                    username:'',
                password:'',
                email:'',
                mobile:'',
                interviewerid:'',
                name:'路人甲',
                tel:'电话',
                email:'邮箱',
                stuid:'学号',
                qq:'qq',
                grade:'成绩',
                 school:'学院',
                classes:'所在班级',
                group:'意向事业群',
                advantage:'个人优势',
                stack:'个人技术栈',
                plain:'个人规划',
                winexperience:'获奖经历',
                home:'家乡',
                born:'出生日期',
                projectexperience:'项目经验',
                worklink:'作品链接',
                professionalrank:'专业排名',
                cadre:'担任过院系及以上级别干部（学生会/社团等',
                otherinfo:'其他信息',
                interview_time:'面试时间',
                state:'状态',
                sex:'性别',
                adjustattitude:'调剂态度',
                intjob:'意向职位',
                professional:'专业',
                }
            ],
            total:0,
            //控制添加用户的显示与隐藏
            addDialogVisible:false,
            // 添加用户的表达数据
            addForm:{
                username:'',
                password:'',
                email:'',
                mobile:'',
                interviewerid:'',
                name:'路人甲',
                tel:'电话',
                email:'邮箱',
                stuid:'学号',
                qq:'qq',
                grade:'成绩',
                 school:'学院',
                classes:'所在班级',
                group:'意向事业群',
                advantage:'个人优势',
                stack:'个人技术栈',
                plain:'个人规划',
                winexperience:'获奖经历',
                home:'家乡',
                born:'出生日期',
                projectexperience:'项目经验',
                worklink:'作品链接',
                professionalrank:'专业排名',
                cadre:'担任过院系及以上级别干部（学生会/社团等',
                otherinfo:'其他信息',
                interview_time:'面试时间',
                state:'状态',
                sex:'性别',
                adjustattitude:'调剂态度',
                intjob:'意向职位',
                professional:'专业',


            },
            //添加表单的规则对象
            addFormRules:{
                username:[
                    {reqired:true,
                    message:'请输入用户名',
                    trigger:'blur'},{min:3, max:10,message:'用户名的长度在3~10个字符之间',
                    trigger:'blur'}
                ],
                password:[
                    {reqired:true,
                    message:'请输入密码',
                    trigger:'blur'},{min:6, max:15,message:'密码的长度在6~15个字符之间',
                    trigger:'blur'}
                ],
                email:[
                    {reqired:true,
                    message:'请输入邮箱',
                    trigger:'blur'},{validator:checkEmail,trigger:'blur'}
                ],
                mobile:[
                    {reqired:true,
                    message:'请输入手机号码',
                    trigger:'blur'},{validator:checkMobile,trigger:'blur'}
                ],
            },
            //控制修改用户的显示与隐藏
            editDialogVisible:false,
            //查询到的用户信息对象
            editForm:{},
            //修改表单的验证规则对象
            editFormRules:{
                email:[
                    {reqired:true,
                    message:'请输入用户的邮箱',
                    trigger:'blur'},
                    ,{validator:checkEmail,trigger:'blur'}
                    ],
                mobile:[
                    {reqired:true,
                    message:'请输入用户手机号码',
                    trigger:'blur'},
                    {validator:checkMobile,trigger:'blur'}
                ],
            },

            //控制分配角色对话框得显示与隐藏
            setRoleDialogVisible:false,
            //需要被分配角色得用户信息
            userInfo:{},
            //所有角色得数据列表
            rolesList:[],
            //已选中得角色id值
            selectedRoleId:''
        }
    },
    created(){
        this.getUserList()
    },
    methods:{
        async getUserList(){
            // const {data:res}= await this.$http.get('users',{
            //     params:this.queryInfo
            //     })
            //     if(res.meta.status !==200){
            //         return this.$message.error('获取用户列表失败！')
            //     } 
            //     this.userlist = res.data.users
            //     this.total = res.data.total
            //     console.log(res)
        },
        //监听pagesize改变的事件
        handleSizeChange(newSize){
            // console.log(newSize)
            this.queryInfo.pagesize = newSize
            this.getUserList()
        },
        //监听页码值改变的事件
        handleCurrentChange(newPage){
            // console.log(newPage)
            this.queryInfo.pagenum = newPage
            this.getUserList()

        },
        //监听 switch 开关状态的改变
        async userStateChange(userinfo){
            console.log(userinfo)
            const {data:res}= await this.$http.put(`users/${userinfo.id}/state/${userinfo.mg_state}`)
            if(res.meta.status !== 200){
                userinfo.mg_state = !userinfo.mg_state
                return this.$message.error('更新状态失败！')
            }
            this.$message.success('更新用户状态成功！')
        },
        //监听添加用户对话框的关闭事件
        addDialogClosed(){
            this.$refs.addFormRef.resetFields()
        },

        //展示编辑用户的对话框
        async showEditDialog(id){
            // console.log(id)
            // const {data:res}= await this.$http.get('users/' 
            // + id)

            // if(res.meta.status !== 200){
            //     return this.$message.error('查询用户信息失败！')
            // }
            // this.editForm = res.data
            this.editDialogVisible = true
        },
        //监听修改用户对话框的关闭事件
        editDialogClosed(){
            this.$refs.editFormRef.resetFields()
        },
        //修改用户信息并提交
        editUserInfo(){
            this.$refs.editFormRef.validate(async valid=>{
                // console.log(valid)
                if(!valid) return
                //发起修改用户信息的数据请求
            const {data:res}= 
            await this.$http.put('users/'+this.editForm.id,
                {
                    email:this.editForm.email,
                    mobile:this.editForm.mobile
                })       
                
                if(res.meta.status !== 200){
                    return this.$message.error('更新用户信息失败')
                }
                //关闭对话框
                this.editDialogVisible = false
                //刷新数据列表
                this.getUserList()
                //提示修改成功
                this.$message.success('更新用户信息成功！')
                
             })
        },
        //根据ID删除用户对应信息
        async removeUserById(id){
            // console.log(id)
            //弹框询问用户是否删除数组
            const confirmResult =await 
            this.$confirm('此操作将永久删除该用户, 是否继续?',
             '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).catch(err =>{
                return err
            })
            //如果用户确认删除，则返回值为字符串confirm
            //如果用户取消删除，则返回值为字符串cancel
            //console.log(confirmResult)
            if(confirmResult !=='confirm'){
                return this.$message.info('已经取消删除')

            }
            // console.log('确认了删除')
            const {data:res}= await this.$http.delete('users/'+id)

            if(res.meta.status !== 200){
                return this.$message.error('删除用户失败')
            }

            this.$message.success('删除用户成功')
            //刷新数据列表
            this.getUserList()
        },


        //展示分配角色得对话框
        async setRole(userInfo){
            this.userInfo = userInfo

            //在展示对话框之前获取所有角色列表
            const {data:res} = await this.$http.get('roles')
            if(res.meta.status !== 200){
                return this.$message.error('获取角色列表失败！')
            }
            this.rolesList = res.data

            this.setRoleDialogVisible = true
            
            
        },

      
    }
    
}
</script>

<style lang="less" scoped>

</style>